import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import systemStore, { SystemStore, languaConfig } from '../../store/SystemStore';
import { inject, observer } from 'mobx-react';
// import  Avatar  from 'antd/es/avatar';
// import IMSDK from '../../net/IMSDK';
import { SettingItem } from '../../component/settingItem/SettingItem';
import './mySetting.less';
import { NavLink } from 'react-router-dom';
import { IconImgEdit } from '../../component/iconImage/IconImageEdit';
import { tr } from '../../i18n/tr';
import { LoginStore } from '../../store/LoginStore';
import { AvatorWithPhoto } from '../../component/avatorWithPhoto/AvatorWithPhoto';
import mainStore, { detailType } from '../../store/MainStore';
import ClearHistory from '../settingDetail/ClearHistory';
import LanguageChange from '../settingDetail/LanguageChange';
import PasChange from '../settingDetail/PasChange';
import SettingCommon from '../settingDetail/SettingCommon';
import ShortKey from '../settingDetail/ShortKey';
import Aboutus from '../settingDetail/Aboutus';
import MyInfo from '../settingDetail/MyInfo';
//export interface IMySettingProps extends RouteComponentProps { }
export interface IMySettingProps {}
export interface IMySettingState { 
	tabName:string;
	lang?:string;
}
interface WithStore extends IMySettingProps {
	systemStore: SystemStore;
	loginstore: LoginStore;
}
@inject('systemStore')
@observer
export default class MySetting extends React.Component<IMySettingProps, IMySettingState> {
	constructor(props: IMySettingProps) {
		super(props);

		this.state = {
			tabName:'my',
			lang:languaConfig[this.injected.systemStore.language]
		};
	}
	get injected() {
		return this.props as WithStore;
	}
	renderSettingRight(){
		switch(this.state.tabName){
			case 'my':
				return <MyInfo></MyInfo>
			case 'common':
				return <SettingCommon />
			case 'shortkey':
				return <ShortKey />
			case 'about':
				return <Aboutus />
		}
		return <div></div>
	}
	public render() {
		// console.log('扫码登录没复制吗', systemStore.telephone ,systemStore.user.account)
		const lan = languaConfig[this.injected.systemStore.language]
		return (
			<div className='setting-wrapper'>
				<div className="setting-left">
					{/* <NavLink
						className="my-info-item"
						to={this.props.match.url + '/info'}
						onClick={() => mainStore.changeShowDetailType(detailType.setting)}
					> */}
						{/* <Avatar className="avator" size={48} icon="user" src={IMSDK.getAvatarUrl(Number(this.injected.systemStore.userId), false)} /> */}
						{/* <span style={{ display: 'flex', width: '200px', overflow: 'hidden' }}>
							<AvatorWithPhoto id={this.injected.systemStore.userId} type={0} size={48} />
							<span style={{ marginLeft: '8px' }}>
								<div className="name">{this.injected.systemStore.nickname}</div>
								<div className="telephone">
									{systemStore.telephone ? systemStore.telephone : systemStore.user.account}
								</div>
							</span>
						</span>
						<span className="right-info-icon">
							<IconImgEdit img={require('../../assets/image/right-icon.png')} size={12} marginSize={4} />
						</span>
					</NavLink> */}
					{/* <SettingItem urlKey={this.props.match.url + '/clearCache'} name={tr(5)} exactName="1.16M" img={require('./../../assets/image/clear-cache.png')} /> */}
					
					<SettingItem
						//urlKey={this.props.match.url + '/clearHistory'}
						onClick={() => {
							this.setState({
								tabName:'my'
							})
						}}
						selected = {this.state.tabName == 'my'}
						name={tr('lng-account')}
						exactName=""
						iconName='setting-account'
					/>
					{/* 通用设置 */}
					<SettingItem
						//urlKey={this.props.match.url + '/clearHistory'}
						onClick={() => {
							this.setState({
								tabName:'common'
							})
						}}
						selected = {this.state.tabName == 'common'}
						name={tr('lng-common')}
						exactName=""
						iconName='setting-common'
					/>
					
					{/* <SettingItem
						urlKey={this.props.match.url + '/secretSet'}
						onClick={() => mainStore.changeShowDetailType(detailType.setting)}
						name={tr(7)}
						exactName=""
						img={require('./../../assets/image/secret-setting.png')}
					/> */}
					{/* 快捷键功能不要，快捷键设置先隐藏了 */}
					{/* <SettingItem
						//urlKey={this.props.match.url + '/languageChange'}
						selected = {this.state.tabName == 'shortkey'}
						onClick={() => {
							this.setState({
								tabName:'shortkey'
							})
						}}
						name={tr('lng-shortkey')}
						//exactName={languaConfig[this.injected.systemStore.language]}
						iconName='setting-keyboard'
					/> */}
					<SettingItem
						//urlKey={this.props.match.url + '/pasChange'}
						onClick={() => {
							this.setState({
								tabName:'about'
							})
						}}
						selected = {this.state.tabName == 'about'}
						name={tr('lng-about')}
						exactName=""
						iconName='setting-about'
					/>
					{/* 关于我们 */}
					{/* <SettingItem
						urlKey={this.props.match.url + '/aboutus'}
						onClick={() => mainStore.changeShowDetailType(detailType.setting)}
						name={tr(181)}
						exactName=""
						img={require('./../../assets/image/anout-us.png')}
					/> */}
				</div>
				<div className="setting-right">
					{ this.renderSettingRight() }
				</div>
			</div>
			
		);
	}
}
